<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>LTable - 工单系统</title>

    <!-- begin::global styles -->
    <link rel="stylesheet" th:href="@{/vendors/bundle.css}" type="text/css">
    <!-- end::global styles -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" th:href="@{/css/app.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/custom.css}" type="text/css">
    <!-- end::custom styles -->

</head>
<body>

<!-- begin::side menu -->
<div class="side-menu">
    <div class='side-menu-body'>
        <ul>
            <li class="open">
                <a th:href="@{/index}"><i class="icon ti-home"></i> <span>首页</span> </a>
            </li>
            <li><a th:href="@{/create_order}"><i class="icon ti-paint-bucket"></i> <span>创建工单</span></a></li>
            <li><a class="active" th:href="@{/order_in_handle}"><i class="icon ti-layers-alt"></i> <span>正在处理</span> </a></li>
            <li><a th:href="@{/order_history}"><i class="icon ti-rocket"></i> <span>历史工单</span> </a></li>

            <li>
                <a data-attr="layout-builder-toggle" href="#">
                    <i class="icon ti-layout"></i>
                    <span>模式</span>
                </a>
            </li>

        </ul>
    </div>
</div>

<div th:replace="~{commons/commons::businessnavbar}"></div>
<!--主要展示内容 在main里显示-->
<!-- begin::main content -->
<main class="main-content">
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <label>紧急程度</label>
                    <input type="text" class="form-control" th:value="${userorder.getOrderlevel()+1}+'级'" readonly>
                </div>
                <div class="col-md-4">
                    <label>工单类型</label>
                    <input type="text" class="form-control" th:value="${userorder.getOrdertype()}" readonly>
                </div>
                <div class="col-md-4">
                    <label>工单标题</label>
                    <input type="text" class="form-control" th:value="${userorder.getTitle()}" readonly>
                </div>
            </div>
        </div>
        </div>
    </div>

    <!--这部分实验用-->
    <div class="card" onclick="selectValue()">
        <div class="card-body">
            <div class="accordion" id="mywindow" style="overflow: scroll;height: 300px;width: 100%">
                <div th:each="theuserhadnleorder:${userhandleorder}">
                    <div th:switch="${theuserhadnleorder.getRolestatus()}">
                        <div th:case="1">
                            <div class="row">
                                <div class="col-md-10">
                                    <div class="row">
                                        <div class="col-md-1" >
                                            <figure class="avatar avatar-sm" >
                                                <img th:src="@{/media/image/avatar.jpg}" class="rounded-circle" onerror="this.src='../media/image/avatar.jpg'">
                                            </figure>
                                        </div>
                                        <div class="col-md-11">
                                            <div align="left">
                                                <label th:text="${theuserhadnleorder.getUsername()}"/>
                                                &nbsp;&nbsp;
                                                <label th:text="${theuserhadnleorder.getReplytime()}"/>
                                            </div>
                                            <div style="float: left" class="col-md-6" align="center" >
                                                <div style="background-color: #0acf97;color: white;border-radius: 5%"  >
                                                    <label style="margin: auto" th:text="${theuserhadnleorder.getReply()}"/>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-md-2">
                                </div>
                            </div>
                        </div>
                        <br>
                        <div th:case="0">
                            <div class="row">
                                <div class="col-md-2">

                                </div>
                                <div class="col-md-10">
                                    <div class="row" >
                                        <div class="col-md-11">
                                            <div align="right" >
                                                <label th:text="${theuserhadnleorder.getReplytime()}"/>
                                                &nbsp;&nbsp;
                                                <label th:text="${theuserhadnleorder.getUsername()}"/>
                                            </div>
                                            <div style="float: right" class="col-md-6" align="center">
                                                <div style="background-color: #0acf97;color: white;border-radius: 5%" >
                                                    <label style="margin: auto" th:text="${theuserhadnleorder.getReply()}"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-1">
                                            <figure class="avatar avatar-sm">
                                                <img th:src="@{/media/image/avatar1.jpg}" class="rounded-circle" onerror="this.src='../media/image/avatar1.jpg'">
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>
                    </div>
                </div>
            </div>
            <script type="text/javascript" defer>
                var div = document.getElementById('mywindow');
                div.scrollTop = div.scrollHeight;
            </script>
        </div>


    </div>



    <!--这部分不用动-->
    <hr>
    <div class="form-group">
        <form th:action="@{/user_answer}" method="post">
            <div class="row">
                <div class="col-md-1"></div>
                <input type="text" name="user_reply" id="user_reply"  class="form-control form-control-lg col-md-9" th:value="${session.user_reply}" placeholder="请输入回复内容..." onkeyup="getCopy()">
                <div class="col-md-1"></div>
                <button class="btn btn-primary" style="text-align: center;float: right">发送</button>
            </div>
        </form>
        <form th:action="@{/order_in_handle/}+${userorder.getOid()}" method="post">
            <input type="text" id="user_reply_copy" name="user_reply_copy" hidden>
            <button class="btn btn-primary" id="forjump" hidden>跳转</button>
        </form>

    </div>
    <script type="text/javascript" defer>
        function getCopy(){

            var a=document.getElementById("user_reply").value;
            document.getElementById("user_reply_copy").value=a;
        }
        function selectValue(){
            var user_reply = document.getElementById("user_reply").value
            //if(user_reply==null || user_reply==""){
                var e = document.createEvent("MouseEvents");
                e.initEvent("click", true, true);
                document.getElementById("forjump").dispatchEvent(e);
            //}
        }
    </script>
</main>
<!-- end::main content -->

<!-- begin::global scripts -->
<script th:src="@{/vendors/bundle.js}"></script>
<!-- end::global scripts -->
<!-- begin::dashboard -->
<script th:src="@{/js/examples/dashboard.js}"></script>
<!-- end::dashboard -->

<!-- begin::custom scripts -->
<script th:src="@{/js/custom.js}"></script>
<script th:src="@{/js/app.js}"></script>
<!-- end::custom scripts -->

</body>
</html>